<template>
        <div id="char" style="width: 350px; height: 250px;"></div>
</template>

<script setup lang="ts">
    import store from '@/store';
    import { onMounted, reactive,defineProps } from 'vue';
    import { ECharts, EChartsOption, init } from 'echarts';
    const props=defineProps({
        data:{
            type:Object,
            default:()=>{}
        }
    })
    onMounted(()=>{
        // console.log(props.data.data);
        
        const {data,type,max}=props.data
        
        // 表1
    const charEle = document.getElementById('char') as HTMLElement;
    const charEch: ECharts = init(charEle);
    const option: EChartsOption = {
        polar: {
            radius: [30, '80%']
        },
        radiusAxis: {
            max: max
        },
        angleAxis: {
            type: 'category',
            data: type,
            startAngle: 75
        },
        tooltip: {},
        series: {
            type: 'bar',
            data: data,
            coordinateSystem: 'polar',
            label: {
                show: true,
                position: 'middle', // or 'start', 'insideStart', 'end', 'insideEnd'
                formatter: '{b}: {c}'
            }
        },
        animation: false
    };
    charEch.setOption(option);
    })
</script>

<style scoped>

</style>